<template>
	<div class="channel-edit">
		<van-cell :border="false">
			<div slot="title" class="title-text">我的频道</div>
			<van-button
				class="edit-btn"
				type="danger"
				plain
				round
				size="mini"
				@click="isEdit = !isEdit"
				>{{ isEdit ? '完成' : '编辑' }}</van-button
			>
		</van-cell>
		<van-grid class="my-grid" :gutter="10">
			<van-grid-item
				class="grid-item"
				v-for="(channel, index) in myChannels"
				:key="index"
				@click="onMyChannelClick(channel, index)"
			>
				<van-icon
					slot="icon"
					name="clear"
					v-show="isEdit && !fiexdChannels.includes(channel.id)"
				></van-icon>
				<span
					class="text"
					:class="{ active: index === active }"
					slot="text"
					>{{ channel.name }}</span
				>
			</van-grid-item>
		</van-grid>

		<!-- 频道推荐 -->
		<van-cell :border="false">
			<div slot="title" class="title-text">频道推荐</div>
		</van-cell>
		<van-grid class="recommend-grid" :gutter="10">
			<van-grid-item
				class="grid-item"
				icon="plus"
				:text="channel.name"
				v-for="(channel, index) in recommendChannels"
				:key="index"
				@click="addChannel(channel)"
			/>
		</van-grid>
		<!-- /频道推荐 -->
	</div>
</template>

<script>
import { getAllChannels, addUserChannel ,deleteUserChannel} from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
	name: 'ChannelEdit',
	components: {},
	props: {
		// 父传子
		myChannels: {
			type: Array,
			required: true,
		},
		active: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {
			allChannels: [], //所有频道
			isEdit: false,
			fiexdChannels: [0], //固定频道
		}
	},
	computed: {
		...mapState(['user']),
		// 计算属性
		recommendChannels() {
			return this.allChannels.filter((channel) => {
				return !this.myChannels.find((myChannel) => {
					return myChannel.id === channel.id
				})
			})
		},
	},
	watch: {},
	created() {
		this.loadAllChannels()
	},
	mounted() {},
	methods: {
		async loadAllChannels() {
			try {
				const { data } = await getAllChannels()
				this.allChannels = data.data.channels
				console.log(data)
			} catch (err) {
				console.log(err)
				this.$toast('获取所有频道失败')
			}
		},
		async addChannel(channel) {
			this.myChannels.push(channel)
			// 数据持久化处理；判断用户是否登录
			if (this.user) {
				// 已登录，保存到线上
				try {
					await addUserChannel({
						id: channel.id,
						seq: this.myChannels.length,
					})
				} catch (err) {
					console.log(err)
					this.$toast('保存失败，请稍后重试')
				}
			} else {
				// 未登录存储本地
				setItem('TOUTIAO_CHANNEL', this.myChannels)
			}
		},
		// 编辑按钮的点击事件，判断编辑状态
		// 不能直接修改props中的active的值，子向父通信
		onMyChannelClick(channel, index) {
			if (this.isEdit) {
				// 如果是固定频道，return出去
				if (this.fiexdChannels.includes(channel.id)) {
					return
				}
				// 编辑状态，删除我的频道
				if (index <= this.active) {
					this.$emit('update-active', this.active - 1, true)
				}
				this.myChannels.splice(index, 1)
        // 持久化操作
        this.deleteChannel(channel)
        

			} else {
				// 非编辑状态，执行切换频道
				this.$emit('update-active', index, false)
			}
		},
    async deleteChannel(channel){
    if(this.user){
      try {
        await deleteUserChannel(channel.id)
      } catch (err) {
        console.log(err);
        this.$toast('操作失败，请稍后重试')
      }
    }else{
      // 未登录，存储本地
  	setItem('TOUTIAO_CHANNEL', this.myChannels)
    }
    }
	},
}
</script>

<style scoped lang="less">
.channel-edit {
	padding: 85px 0;
	.title-text {
		font-size: 32px;
		color: #333333;
	}

	.edit-btn {
		width: 104px;
		height: 48px;
		font-size: 26px;
		color: #f85959;
		border: 1px solid #f85959;
	}

	/deep/ .grid-item {
		width: 160px;
		height: 86px;
		.van-grid-item__content {
			white-space: nowrap;
			background-color: #f4f5f6;
			.van-grid-item__text,
			.text {
				font-size: 28px;
				color: #222;
				margin-top: 0;
			}
			.active {
				color: red;
			}
			.van-grid-item__icon-wrapper {
				position: unset;
			}
		}
	}

	/deep/ .my-grid {
		.grid-item {
			.van-icon-clear {
				position: absolute;
				right: -10px;
				top: -10px;
				font-size: 30px;
				color: #cacaca;
				z-index: 2;
			}
		}
	}

	/deep/ .recommend-grid {
		.grid-item {
			.van-grid-item__content {
				flex-direction: row;
				.van-icon-plus {
					font-size: 28px;
					margin-right: 6px;
				}
			}
		}
	}
}
</style>
